﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Online Sport Mall</title>
    <link href="Sign-up.css" rel="stylesheet" />
</head>
<body>
   <div id="wrapper">
        <header class="head">
            <div class="logo-container">
                <a href="home-page.html">
                    <img src="images/Discover-sport-logo.jpg" />
                </a>
            </div>
            <div class="select">
                <select id="language">
                    <option selected="selected">Select language</option>
                    <option value="cs">Ceský </option>
                    <option value="de">Deutsch</option>
                    <option value="es">Español</option>
                    <option value="fr">Français</option>
                    <option value="it">Italiano</option>                    
                    <option value="is">Íslenskur</option>
                    <option value="hu">Magyar</option>
                    <option value="pl">Polski</option>
                    <option value="pt">Português</option>
                    <option value="sl">Slovenšcina</option>
                    <option value="sk">Slovenských</option>
                    <option value="sv">Svenska</option>
                </select>
                <select id="currency">
                    <option value="EUR" selected="selected">€ EUR</option>
                    <option value="USD">$ USD</option>
                    <option value="CNY">¥ CNY</option>
                    <option value="AUD">$ AUD</option>
                    <option value="CZK">Kč CZK</option>
                    <option value="HUF">Ft HUF</option>
                    <option value="ISK">kr ISK</option>
                    <option value="PLN">zł PLN</option>
                    <option value="SEK">kr SEK</option>
                </select>
            </div>
            <hr />
            <div class="reg-container">
                    <div class="name">
                        <label for="name">Username:</label>
                        <input type="text" id="name"/>
                     </div>
                    <div class="pass">
                        <label for="pass">Password:</label>
                        <input type="password" required="required" id="pass"/> 
                    </div>   
                    <div class="log"><a href="#" >Log in</a></div>
                    <div class="log"><a href="Sign-up.html">Sign up</a></div>
            </div>
            <nav class="navigation">
                <ul id="main-ul">
                    <li> <a href="home-page.html">Home</a></li>
                    <li> <a href="#">Men</a>
                        <ul class="hidden">
                            <li class="level1" >
                                <a href="#">Footwear</a>
                                <ul>
                                    <li><a href="#">Trainers</a></li>
                                    <li><a href="#">Boots</a></li>
                                    <li><a href="#">Shoes</a></li>
                                    <li><a href="#">Indoor and Court Trainers</a></li>
                                    <li><a href="#">Astro Trainers</a></li>
                                    <li><a href="#">Running Shoes</a></li>
                                    <li><a href="#">Safety Boots</a></li>
                                    <li><a href="#">Sandals and Flip Flops</a></li>
                                </ul>
                            </li>
                            <li class="level1" >
                                <a href="#">Clothing</a>
                                <ul>
                                    <li><a href="#">Shirts</a></li>
                                    <li><a href="#">Jeans</a></li>
                                    <li><a href="#">Hoodies</a></li>
                                    <li><a href="#">Sweat Pants</a></li>
                                    <li><a href="#">Jacket nad Coats</a></li>
                                    <li><a href="#">Polo Shirts</a></li>
                                    <li><a href="#">Shorts</a></li>
                                </ul>
                            </li>
                            <li class="level1" >
                                <a href="#">Accessories</a>
                                <ul>
                                    <li><a href="#">Blets</a></li>
                                    <li><a href="#">Caps and Hats</a></li>
                                    <li><a href="#">Watches</a></li>
                                    <li><a href="#">Sunglasses</a></li>
                                    <li><a href="#">Wallets</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Women</a>
                        <ul class="hidden">
                            <li class="level1" >
                               <a href="#">Footwear</a>
                                <ul>
                                    <li><a href="#">Trainers</a></li>
                                    <li><a href="#">Boots</a></li>
                                    <li><a href="#">Shoes</a></li>
                                    <li><a href="#">Indoor and Court Trainers</a></li>
                                    <li><a href="#">Astro Trainers</a></li>
                                    <li><a href="#">Running Shoes</a></li>
                                    <li><a href="#">Safety Boots</a></li>
                                    <li><a href="#">Sandals and Flip Flops</a></li>
                                </ul>
                            </li>
                            <li class="level1" >
                               <a href="#">Clothing</a>
                                <ul>
                                    <li><a href="#">Shirts</a></li>
                                    <li><a href="#">Jeans</a></li>
                                    <li><a href="#">Hoodies</a></li>
                                    <li><a href="#">Bikinis and Tankinis</a></li>
                                    <li><a href="#">Jacket nad Coats</a></li>
                                    <li><a href="#">Skirt and Dresses</a></li>
                                    <li><a href="#">Shorts</a></li>
                                </ul>
                            </li>
                            <li class="level1" >
                                <a href="#">Accessories</a>
                                <ul>
                                    <li><a href="#">Blets</a></li>
                                    <li><a href="#">Caps and Hats</a></li>
                                    <li><a href="#">Hair Accessories</a></li>
                                    <li><a href="#">Sunglasses</a></li>
                                    <li><a href="#">Jewellery</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Kids</a>
                        <ul class="hidden">
                            <li class="level1" >
                                <a href="#">Footwear</a>
                                <ul>
                                    <li><a href="#">Trainers</a></li>
                                    <li><a href="#">Boots</a></li>
                                    <li><a href="#">Shoes</a></li>
                                    <li><a href="#">Indoor and Court Trainers</a></li>
                                    <li><a href="#">Astro Trainers</a></li>
                                    <li><a href="#">Running Shoes</a></li>
                                    <li><a href="#">Safety Boots</a></li>
                                    <li><a href="#">Sandals and Flip Flops</a></li>
                                </ul>
                            </li>
                            <li class="level1" >
                                <a href="#">Clothing</a>
                                <ul>
                                    <li><a href="#">Shirts</a></li>
                                    <li><a href="#">Jeans</a></li>
                                    <li><a href="#">Hoodies</a></li>
                                    <li><a href="#">Bikinis and Tankinis</a></li>
                                    <li><a href="#">Jacket nad Coats</a></li>
                                    <li><a href="#">Skirt and Dresses</a></li>
                                    <li><a href="#">Shorts</a></li>
                                </ul>
                            </li>
                            <li class="level1" >
                                <a href="#">Accessories</a>
                                <ul>
                                    <li><a href="#">Blets</a></li>
                                    <li><a href="#">Caps and Hats</a></li>
                                    <li><a href="#">Slippers</a></li>
                                    <li><a href="#">Sunglasses</a></li>
                                    <li><a href="#">Gloves</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Sale</a></li>
                    <li><a href="#">Brands</a>
                        <ul class="hidden" id="brands">
                            <li class="level1" >
                                <a href="http://www.adidas.com/com/">Adidas</a>
                            </li>
                            <li class="level1" >
                                <a href="http://www.nike.com/language_tunnel">Nike</a>
                            </li>
                            <li class="level1" >
                                <a href="http://www.puma.com/">Puma</a>
                            </li>
                            <li class="level1" >
                                <a href="http://www.umbro.com/choose/">Umbro</a>
                            </li>
                            <li class="level1" >
                                <a href="http://www.reebok.com/international/">Reebok</a>
                            </li>
                            <li class="level1" >
                                <a href="http://www.fila.com/on/demandware.store/Sites-FILA-Site/en_US/Home-RegionSelector">Fila</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="Gallery.html">Gallery</a>
                    </li>
                </ul>
            </nav>
        </header>
       <section>
           <div class="header">User Registration</div>
           <div class="info"> <sup>*</sup> Indicates required fields</div>
           <form method="post">           
               <div>
                   <label for="email">Email address:<sup>*</sup></label>
                   <input type="email" id="email" title="E-mail" pattern="/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/" required="required" />
               </div>
               <div>
                   <label for="email">Retype email:<sup>*</sup></label>
                   <input type="email" id="email1" title="E-mail" pattern="/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/" required="required" />
               </div>
               <div>
                   <label for="s1">Title:<sup>*</sup></label>
                   <select id="s1" class="select" required="required">
                       <option selected="selected">Mr</option>
                       <option>Mrs</option>
                       <option>Miss</option>
                       <option>Ms</option>
                   </select>
               </div>
              <div>
                   <label for="fn">First name:<sup>*</sup></label>
                   <input type="text" id="fn" required="required" title="First name" />
               </div>
               <div>
                   <label for="ln">Last name:<sup>*</sup></label>
                   <input type="text" id="ln" required="required"  title="Last name"/>
               </div>
               <div>
               <label for="s2">Country:</label>
                   <select id="s2" class="select" required="required">
                       <option value="BG" selected="selected">Bulgaria</option>
                        <option value="AL"> Albania </option>
                        <option value="DZ"> Algeria </option>
                        <option value="AD"> Andorra </option>
                        <option value="AR"> Argentina </option>
                        <option value="AU"> Australia </option>
                        <option value="AT"> Austria </option>
                        <option value="AZ"> Azerbaijan </option>
                        <option value="BS"> Bahamas </option>
                        <option value="BH"> Bahrain </option>
                        <option value="BD"> Bangladesh </option>
                        <option value="BB"> Barbados </option>
                        <option value="BY"> Belarus </option>
                        <option value="BE"> Belgium </option>
                        <option value="BM"> Bermuda </option>
                        <option value="BP"> Bfpo </option>
                        <option value="BO"> Bolivia </option>
                        <option value="BA"> Bosnia And Herzegovina </option>
                        <option value="BR"> Brazil </option>
                        <option value="BN"> Brunei Darussalam </option>
                        <option value="CA"> Canada </option>
                        <option value="CV"> Cape Verde </option>
                        <option value="KY"> Cayman Islands </option>
                        <option value="CL"> Chile </option>
                        <option value="CN"> China </option>
                        <option value="HR"> Croatia </option>
                        <option value="CY"> Cyprus </option>
                        <option value="CZ"> Czech Republic </option>
                        <option value="DK"> Denmark </option>
                        <option value="EC"> Ecuador </option>
                        <option value="EG"> Egypt </option>
                        <option value="EE"> Estonia </option>
                        <option value="FK"> Falkland Islands (Malvinas) </option>
                        <option value="FI"> Finland </option>
                        <option value="FR"> France </option>
                        <option value="GE"> Georgia </option>
                        <option value="DE"> Germany </option>
                        <option value="GH"> Ghana </option>
                        <option value="GI"> Gibraltar </option>
                        <option value="GR"> Greece </option>
                        <option value="GL"> Greenland </option>
                        <option value="GG"> Guernsey </option>
                        <option value="GY"> Guyana </option>
                        <option value="HK"> Hong Kong </option>
                        <option value="HU"> Hungary </option>
                        <option value="IS"> Iceland </option>
                        <option value="IN"> India </option>
                        <option value="ID"> Indonesia </option>
                        <option value="IQ"> Iraq </option>
                        <option value="IE"> Ireland </option>
                        <option value="IL"> Israel </option>
                        <option value="IT"> Italy </option>
                        <option value="JM"> Jamaica </option>
                        <option value="JE"> Jersey </option>
                        <option value="JO"> Jordan </option>
                        <option value="KZ"> Kazakhstan </option>
                        <option value="KE"> Kenya </option>
                        <option value="KR"> Korea, Republic Of </option>
                        <option value="KW"> Kuwait </option>
                        <option value="LV"> Latvia </option>
                        <option value="LB"> Lebanon </option>
                        <option value="LR"> Liberia </option>
                        <option value="LY"> Libyan Arab Jamahiriya </option>
                        <option value="LI"> Liechtenstein </option>
                        <option value="LT"> Lithuania </option>
                        <option value="LU"> Luxembourg </option>
                        <option value="MY"> Malaysia </option>
                        <option value="MT"> Malta </option>
                        <option value="MU"> Mauritius </option>
                        <option value="MX"> Mexico </option>
                        <option value="MD"> Moldova, Republic Of </option>
                        <option value="ME"> Montenegro </option>
                        <option value="MS"> Montserrat </option>
                        <option value="MA"> Morocco </option>
                        <option value="NL"> Netherlands </option>
                        <option value="NZ"> New Zealand </option>
                        <option value="NO"> Norway </option>
                        <option value="OM"> Oman </option>
                        <option value="PK"> Pakistan </option>
                        <option value="PY"> Paraguay </option>
                        <option value="PE"> Peru </option>
                        <option value="PH"> Philippines </option>
                        <option value="PL"> Poland </option>
                        <option value="PT"> Portugal </option>
                        <option value="PR"> Puerto Rico </option>
                        <option value="RO"> Romania </option>
                        <option value="SM"> San Marino </option>
                        <option value="SA"> Saudi Arabia </option>
                        <option value="SN"> Senegal </option>
                        <option value="RS"> Serbia </option>
                        <option value="SC"> Seychelles </option>
                        <option value="SG"> Singapore </option>
                        <option value="SK"> Slovakia </option>
                        <option value="SI"> Slovenia </option>
                        <option value="ZA"> South Africa </option>
                        <option value="ES"> Spain </option>
                        <option value="SE"> Sweden </option>
                        <option value="CH"> Switzerland </option>
                        <option value="TW"> Taiwan </option>
                        <option value="TH"> Thailand </option>
                        <option value="TT"> Trinidad And Tobago </option>
                        <option value="TN"> Tunisia </option>
                        <option value="TR"> Turkey </option>
                        <option value="AE"> United Arab Emirates </option>
                        <option value="GB"> United Kingdom </option>
                        <option value="US"> United States </option>
                        <option value="UY"> Uruguay </option>
                        <option value="UZ"> Uzbekistan </option>
                        <option value="VE"> Venezuela </option>
                        <option value="VN"> Vietnam </option>                  
                   </select>
                </div>
               <div>
                   <label for="db">Date of birth:</label>
                   <input type="tel" id="db" required="required" value="dd/mm/yyyy"  title="Type your birth date" />
               </div>
               <div>
                   <label for="zip">Post code/Zip:</label>
                   <input type="text" id="zip"  title="Post code"/>
               </div>
               <div>
                   <label for="tel">Telephone/Mobile:</label>
                   <input type="tel" id="tel" required="required"  title="Phone or mobile number "/>
               </div>
               <div>
                   <label for="pass">Password:<sup>*</sup></label>
                   <input type="password" id="pass" required="required"  title="Password"/>
               </div>
               <div>
                   <label for="pass">Confirm password:<sup>*</sup></label>
                   <input type="password" id="Password1" required="required" title="Password"/>
               </div>
                <div class="buttons">
                   <input type="submit" id="submit" value="Register" />
                   <input type="reset" id="reset" value="Clear" />
                </div>
        </form>
       </section>
       <footer>
            <div>
                <div class="help">
                    <div>
                        Get Help
                    </div>
                    <ul>
                        <li><a href="#">Contact us</a></li>
                        <li><a href="#">Shoping</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">My account</a></li>
                        <li><a href="#">Investor Relations</a></li>
                    </ul>
                </div>
                <div class="help">
                    <div>
                        Orders
                    </div>
                    <ul>
                        <li><a href="#">Payment options</a></li>
                        <li><a href="#">Shipping and delivery</a></li>
                        <li><a href="#">Returns</a></li>
                        <li><a href="#">Order traking</a></li>
                        <li><a href="#">Size guide</a></li>
                    </ul>
                </div>
                <div class="social-media">                
                            <div>
                                Social media
                            </div>
                            <ul>
                                <li class="facebook"><a href="https://www.facebook.com/"><img src="images/facebook_logo_square_webtreatsetc.png" alt="Facebook"/></a></li>
                                <li class="twitter"><a href="https://twitter.com/"><img src="images/images%20(1).jpg" alt="Twitter"/></a></li>
                                <li class="youtube"><a href="http://www.youtube.com/"><img src="images/wood-youtube-webtreatsetc.png" alt="Youtube" /></a></li>
                                <li class="google-plus"><a href="https://accounts.google.com/"><img src="images/wood-google-plus-icon.png" alt="Google+"  /></a></li>
                                <li class="pinterest"><a href="http://pinterest.com/" ><img src="images/images%20(2).jpg" alt="Pinterest"  /></a></li>
                            </ul>
                    </div>
                <div class="pay">
                            <div>
                                Payments
                            </div>
                            <ul>
                                <img src="images/payment_logo.jpg" />
                            </ul>               
                    </div>
            </div>
            <div class="copyright">© 2013 OnlineSportMall.com Ltd.</div>
        </footer>
   </div>
</body>
</html>
